<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>localStorage</title>
  <link rel="stylesheet" charset="utf-8" href="../../base.css" />
  <style type="text/css">
		body{padding:30px;}
        p{margin-bottom:15px;}
  </style>
</head>

<body>

<div id="wrapper" class="single">  
      
    <h3>Storage</h4>
    
    <p>Press the <strong>SUBMIT</strong> button to store the value,<br />
      or press the <strong>RESTORE</strong> button to restore the stored value, <br />
      aand press the <strong>CLEAR</strong> button to clear the localStorage data.
    </p>
    
    <p><textarea id="theValue" rows="5" cols="30"></textarea></p>
    
    <input id="storeIt" type="button" value="submit" /> 
    <input id="restoreIt" type="button" value="restore" />
    <input type="button" id="removeIt" value="removeIt" />
    <input id="clearIt" type="button" value="clear" />
    
        <script type="text/javascript">
        /**
	 * @ NAME: Cross-browser TextStorage
	 * @ DESC: text storage solution for your pages
	 * @ COPY: sofish, http://sofish.de
	 */
	typeof window.localStorage == 'undefined' && ~function () {
	
	    var localStorage = window.localStorage = {},
	        prefix = 'data-userdata',
	        doc = document,
	        attrSrc = doc.body,
	
	        // save attributeNames to <body>'s `data-userdata` attribute
	        mark = function (key, isRemove, temp, reg) {
	
	            attrSrc.load(prefix);
	            temp = attrSrc.getAttribute(prefix) || '';
	            reg = RegExp('\\b' + key + '\\b,?', 'i');
	
	            var hasKey = reg.test(temp) ? 1 : 0;
	
	            temp = isRemove ? temp.replace(reg, '') : hasKey ? temp : temp === '' ? key : temp.split(',').concat(key).join(',');
	
	            alert(temp);
	
	            attrSrc.setAttribute(prefix, temp);
	            attrSrc.save(prefix);
	
	        };
	
	    // add IE behavior support
	    attrSrc.addBehavior('#default#userData');
	
	    localStorage.getItem = function (key) {
	        attrSrc.load(key);
	        return attrSrc.getAttribute(key);
	    };
	
	    localStorage.setItem = function (key, value) {
	        attrSrc.setAttribute(key, value);
	        attrSrc.save(key);
	        mark(key);
	    };
	
	    localStorage.removeItem = function (key) {
	        attrSrc.removeAttribute(key);
	        attrSrc.save(key);
	        mark(key, 1);
	    };
	
	    // clear all attributes on <body> tag that using for textStorage 
	    // and clearing them from the 
	    // 'data-userdata' attribute's value of <body> tag
	    localStorage.clear = function () {
	
	        attrSrc.load(prefix);
	
	        var attrs = attrSrc.getAttribute(prefix).split(','),
	            len = attrs.length;
	
	        if (attrs[0] === '') return;
	
	        for (var i = 0; i < len; i++) {
	            attrSrc.removeAttribute(attrs[i]);
	            attrSrc.save(attrs[i]);
	        };
	
	        attrSrc.setAttribute(prefix, '');
	        attrSrc.save(prefix);
	
	    };
	
	}();

    </script>
  
</div><!-- #wrapper -->

</body>
</html>
